<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
              <!--             <Col span="8">
                               <FormItem label='公司名称：' prop="companyId">
                                  <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName'
                        :orgTree="true"
                        :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                               </FormItem>
                           </Col>
                           <Col span="8">
                               <FormItem label="起止时间：" prop="dateRange">
                                   <DatePicker type="daterange"  v-model="dataToQuery.dateRange" split-panels placeholder="请选择" style="width: 100%"></DatePicker>
                               </FormItem>
                           </Col>  -->
              <Col span="8">
                <FormItem label='公司名称：' prop="companyName">
                  <Input  class='' placeholder="请填写公司名称" type='text' v-model='dataToQuery.companyName'></Input>
                </FormItem>
              </Col>
              <Col span="8">
                 <FormItem label="考核年份：" prop="year">
                     <DatePicker class="query-form-el" type="year" v-model="dataToQuery.year" format="yyyy" :clearable="false"
                                 placeholder="请选择"></DatePicker>
                 </FormItem>
               </Col>
               <Col span="8">
                     <Button @click="reseter" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="queryUseCase">查询</Button>
               </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button :loading="safeQueryLoading" size="large" type="success" class="ivu-btn-add" icon="md-add"  @click="exportSafeTable">导出安全业务考核表</Button>
                    <Button :loading="envQueryLoading" size="large" type="success" class="ivu-btn-add" icon="md-add"  @click="exportEnvTable">导出环保业务考核表</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading ||  pageStatus.baseLoading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange1" @on-page-size-change="pageSizeChange1" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>

        <Modal title="安全业务使用情况统计" :transfer=false  footer-hide :width=1200 v-model="safeVisible">
            <div>
              <Tabs>
                <TabPane label="安全业务使用情况">
                  <Spin v-if="queryLoading" fix>加载中...</Spin>
                  <table border="2">
                      <caption align="center">{{safeInfo.companyName}}平台安全工作使用情况考核得分表</caption>
                      <tr>
                          <td>共计得分：</td>
                          <td colspan="8">{{ safeInfo.score }}</td>
                      </tr>
                      <tr>
                          <td colspan="9">系统日常信息维护（20）</td>
                      </tr>
                      <tr>
                          <td colspan="3">基本信息维护（8）</td>
                          <td colspan="6">台账信息维护（12）</td>
                      </tr>
                      <tr>
                          <td>企业信息（3）</td>
                          <td>管理员信息（2）</td>
                          <td>角色人员（3）</td>
                          <td>燃气管理（2）</td>
                          <td>危化品（2）</td>
                          <td>特种设备（2）</td>
                          <td>职业健康（3）</td>
                          <td>消防管理（2）</td>
                          <td>防汛工作（1）</td>
                      </tr>
                      <tr>
                          <td>{{safeInfo.enterpriseInfo}}</td>
                          <td>{{safeInfo.adminInfo}}</td>
                          <td>{{safeInfo.rolePeople}}</td>
                          <td>{{safeInfo.saGasUseAccount}}</td>
                          <td>{{safeInfo.hcmInfo}}</td>
                          <td>{{safeInfo.saRptSpecialEq}}</td>
                          <td>{{safeInfo.healthBasicInformation}}</td>
                          <td>{{safeInfo.fireSafetyUnitsRegistration}}</td>
                          <td>{{safeInfo.floodPrevention}}</td>
                      </tr>
                      <tr>
                          <td colspan="9">数据填报及时率（30）</td>
                      </tr>
                      <tr>
                          <td>安全报表（8）</td>
                          <td>事故管理（5）</td>
                          <td colspan="2">检维修（3）</td>
                          <td>风险防控（4）</td>
                          <td>隐患排查（5）</td>
                          <td colspan="3">其他（5）</td>
                      </tr>
                      <tr>
                          <td>{{safeInfo.enRptSuperviseInspect}}</td>
                          <td>{{safeInfo.accident}}</td>
                          <td colspan="2">{{safeInfo.examConstruction}}</td>
                          <td>{{safeInfo.saRiskFacility}}</td>
                          <td>{{safeInfo.apsgTask}}</td>
                          <td colspan="3">{{safeInfo.otherPromptness}}</td>
                      </tr>
                      <tr>
                          <td colspan="9">数据填报完整率（30）</td>
                      </tr>
                      <tr>
                          <td>安全报表（8）</td>
                          <td>事故管理（4）</td>
                          <td colspan="2">检维修（3）</td>
                          <td>安全标准化（3）</td>
                          <td>风险防控（3）</td>
                          <td>隐患排查（4）</td>
                          <td colspan="2">其他（5）</td>
                      </tr>
                      <tr>
                          <td>{{safeInfo.enRptSuperviseInspectCompleteness}}</td>
                          <td>{{safeInfo.accidentCompleteness}}</td>
                          <td colspan="2">{{safeInfo.examConstructionCompleteness}}</td>
                          <td>{{safeInfo.saStdStandardCompleteness}}</td>
                          <td>{{safeInfo.saRiskFacilityCompleness}}</td>
                          <td>{{safeInfo.apsgTaskCompleteness}}</td>
                          <td colspan="2">{{safeInfo.otherPromptnessCompleteness}}</td>
                      </tr>
                      <tr>
                          <td colspan="9">集团调整（20）</td>
                      </tr>
                      <tr>
                          <td>管理员工作（10）</td>
                          <td>问题解决（5）</td>
                          <td>登录频次（2）</td>
                          <td colspan="6">其他（3）</td>
                      </tr>
                      <tr>
                          <td>{{safeInfo.adminwork}}</td>
                          <td>{{safeInfo.questionSolve}}</td>
                          <td>{{safeInfo.loginFrequency}}</td>
                          <td colspan="6">{{safeInfo.otherAdjustment}}</td>
                      </tr>
                  </table>
                  <p style="margin-top:10px;font-size:16px;color:red">括号内数字为各模块满分分值，系统根据数据填报情况实时自动打分，不涉及模块不计入总分。</p>
                </TabPane>
                <TabPane label="考核规则">
                  <table style="table-layout: fixed;">
                    <colgroup>
                      <col width="15%"></col>
                      <col width="85%"></col>
                    </colgroup>
                    <tr>
                      <td colspan="2">系统日常信息维护（每日凌晨更新）</td>
                    </tr>
                    <tr>
                      <td colspan="2">基本信息维护</td>
                    </tr>
                    <tr>
                      <td>企业信息</td>
                      <td style="text-align:left">填报信息完整，其中如果"安全生产标准化"在基本信息有填报，但是没有在“安全工作-安全标准化”模块中没有信息，则扣1分，反之也扣一分</td>
                    </tr>
                    <tr>
                      <td>系统管理员信息</td>
                      <td style="text-align:left">企业在综合工作-管理员维护-系统管理员功能下，设置两名系统管理员，多出或缺少均扣一分。（建议安全、环保各一名）</td>
                    </tr>
                    <tr>
                      <td >关键角色人员信息</td>
                      <td style="text-align:left">企业在系统管理-角色分配下的“企业安全负责人”“企业安全管理人员”“企业总经理书记（事故审批）”这3个角色中，每个角色内有且只有一名人员，多出或缺少均扣一分，扣完为止</td>
                    </tr>
                    <tr>
                      <td colspan="2">台账信息维护</td>
                    </tr>
                    <tr>
                      <td >燃气管理</td>
                      <td rowspan="6" style="text-align:left">涉及的功能须将各项数据填报完整，包括非必填项（备注除外），填报不全扣一分，扣完为止。如企业不涉及该项（以平台无数据为准），则该不扣分；如发现隐瞒不报，则否决项，为0分</td>
                    </tr>
                    <tr>
                      <td >危化品管理</td>
                    </tr>
                    <tr>
                      <td >特种设备管理</td>
                    </tr>
                    <tr>
                      <td >职业健康管理</td>
                    </tr>
                    <tr>
                      <td >消防管理</td>
                    </tr>
                    <tr>
                      <td >防汛工作</td>
                    </tr>
                    <tr>
                      <td colspan="2">系统数据填报及时率</td>
                    </tr>
                    <tr>
                      <td >安全报表</td>
                      <td style="text-align:left">安全监督检查，与内部监督检查 填报时间与检查时间做对比，超过5天扣一分，扣完为止</td>
                    </tr>
                    <tr>
                      <td >事故管理</td>
                      <td style="text-align:left">事故简报上报状态迟报一条扣1分，企业调查报告，超过1个月，扣2分，扣完为止，如果企业不涉及则在计算最终得分时本条不参与计算，最终给出说明，如发现隐瞒补报，则否决项直接0分</td>
                    </tr>
                    <tr>
                      <td >检维修管理</td>
                      <td style="text-align:left">填报时间晚于检维修开始时间，每条扣一分，扣完为止</td>
                    </tr>
                    <tr>
                      <td >风险防控</td>
                      <td style="text-align:left">企业每年3月份前没有风险防控台账更新扣4分</td>
                    </tr>
                    <tr>
                      <td>隐患排查</td>
                      <td style="text-align:left">企业隐患排查,出现未排查,超时排查,出现一条扣一分,扣完为止</td>
                    </tr>
                    <tr>
                      <td >其他</td>
                      <td style="text-align:left">填报时间与检查时间做对比，超过5天扣一分，扣完为止</td>
                    </tr>
                    <tr>
                      <td colspan="2">系统数据填报完整率</td>
                    </tr>
                    <tr>
                      <td >安全报表</td>
                      <td rowspan="6"  style="text-align:left">所有模块数据保证应填尽填报，包括非必填项（备注除外）。如果模块数据填报不完整、不及时、不准确，则发现一条扣1分，扣完为止</td>
                    </tr>
                    <tr>
                      <td >事故管理</td>
                    </tr>
                    <tr>
                      <td >检维修管理</td>
                    </tr>
                    <tr>
                      <td >风险防控</td>
                    </tr>
                    <tr>
                      <td>隐患排查</td>
                    </tr>
                    <tr>
                      <td >其他</td>
                    </tr>
                    <tr>
                      <td colspan="2">集团调整</td>
                    </tr>
                    <tr>
                      <td >管理员工作</td>
                      <td rowspan="4"  style="text-align:left">集团可根据实际情况对企业平台使用情况进行分数调整。</td>
                    </tr>
                    <tr>
                      <td >问题解决</td>
                    </tr>
                    <tr>
                      <td >登录频次</td>
                    </tr>
                    <tr>
                      <td>其他</td>
                    </tr>
                  </table>
                </TabPane>
              </Tabs>
            </div>
        </Modal>

      <Modal title="环保业务使用情况统计" :transfer=false  :width=1200 footer-hide v-model="envVisible">
        <div>
          <Tabs>
            <TabPane label="环保业务使用情况">
              <Spin v-if="queryLoading" fix>加载中...</Spin>
              <table border="2">
                <caption align="center">{{envInfo.companyName}}平台环保工作使用情况考核得分表</caption>
                <tr>
                  <td>共计得分：</td>
                  <td colspan="8">{{ envInfo.score }}</td>
                </tr>
                <tr>
                  <td colspan="9">系统日常信息维护（20）</td>
                </tr>
                <tr>
                  <td colspan="3">基本信息维护（8）</td>
                  <td colspan="6">台账信息维护（12）</td>
                </tr>
                <tr>
                  <td>企业信息（3）</td>
                  <td>管理员信息（2）</td>
                  <td>角色人员（3）</td>
                  <td>绿色制造台账（2）</td>
                  <td>排污许可证（2）</td>
                  <td>放射源台账（2）</td>
                  <td>危废固废（2）</td>
                  <td>移动源管理（2）</td>
                  <td>其他（2）</td>
                </tr>
                <tr>
                  <td>{{envInfo.enterpriseInfo}}</td>
                  <td>{{envInfo.adminInfo}}</td>
                  <td>{{envInfo.rolePeople}}</td>
                  <td>{{envInfo.enRptPerformanceRating}}</td>
                  <td>{{envInfo.enDspInfo}}</td>
                  <td>{{envInfo.actinogenManagementAccount}}</td>
                  <td>{{envInfo.selfGeneralSolidWaste}}</td>
                  <td>{{envInfo.machines}}</td>
                  <td>{{envInfo.otherAccount}}</td>
                </tr>
                <tr>
                  <td colspan="9">数据填报及时率（30）</td>
                </tr>
                <tr>
                  <td>环保报表（10）</td>
                  <td>风险防控（3）</td>
                  <td colspan="2">清洁生产审核（3）</td>
                  <td>环保画像（8）</td>
                  <td colspan="4">其他（6）</td>
                </tr>
                <tr>
                  <td>{{envInfo.enRptSuperviseInspect}}</td>
                  <td>{{envInfo.envRisk}}</td>
                  <td colspan="2">{{envInfo.enPrdAuditForm}}</td>
                  <td>{{envInfo.ecoPortrait}}</td>
                  <td colspan="4">{{envInfo.otherPromptness}}</td>
                </tr>
                <tr>
                  <td colspan="9">数据填报完整率（30）</td>
                </tr>
                <tr>
                  <td>环保报表（10）</td>
                  <td>风险防控（3）</td>
                  <td colspan="2">清洁生产审核（3）</td>
                  <td>环保画像（8）</td>
                  <td colspan="4">其他（6）</td>
                </tr>
                <tr>
                  <td>{{envInfo.enRptSuperviseInspectCompleteness}}</td>
                  <td>{{envInfo.envRiskCompleteness}}</td>
                  <td colspan="2">{{envInfo.enPrdAuditFormCompleteness}}</td>
                  <td>{{envInfo.ecoPortraitCompleteness}}</td>
                  <td colspan="4">{{envInfo.otherPromptnessCompleteness}}</td>
                </tr>
                <tr>
                  <td colspan="9">集团调整（20）</td>
                </tr>
                <tr>
                  <td>管理员工作（10）</td>
                  <td>问题解决（5）</td>
                  <td>登录频次（2）</td>
                  <td colspan="6">其他（3）</td>
                </tr>
                <tr>
                  <td>{{envInfo.adminwork}}</td>
                  <td>{{envInfo.questionSolve}}</td>
                  <td>{{envInfo.loginFrequency}}</td>
                  <td colspan="6">{{envInfo.otherAdjustment}}</td>
                </tr>
              </table>
              <p style="margin-top:10px;font-size:16px;color:red">括号内数字为各模块满分分值，系统根据数据填报情况实时自动打分，不涉及模块不计入总分。</p>
            </TabPane>
            <TabPane label="考核规则">
              <table style="table-layout: fixed;">
                <colgroup>
                  <col width="15%"></col>
                  <col width="85%"></col>
                </colgroup>
                <tr>
                  <td colspan="2">系统日常信息维护（每日凌晨更新）</td>
                </tr>
                <tr>
                  <td colspan="2">基本信息维护</td>
                </tr>
                <tr>
                  <td>企业信息</td>
                  <td style="text-align:left">填报信息完整，其中如果"安全生产标准化"在基本信息有填报，但是没有在“安全工作-安全标准化”模块中没有信息，则扣1分，反之也扣一分</td>
                </tr>
                <tr>
                  <td>系统管理员信息</td>
                  <td style="text-align:left">企业在综合工作-管理员维护-系统管理员功能下，设置两名系统管理员，多出或缺少均扣一分（建议安全、环保各一名）</td>
                </tr>
                <tr>
                  <td >关键角色人员信息</td>
                  <td style="text-align:left">企业在系统管理-角色分配下的“企业环保负责人”“企业环保管理人员”这2个角色中，每个角色内有且只有一名人员，多出或缺少均扣一分，扣完为止</td>
                </tr>
                <tr>
                  <td colspan="2">台账信息维护</td>
                </tr>
                <tr>
                  <td >绿色制造台账</td>
                  <td rowspan="6" style="text-align:left">涉及的功能须将各项数据填报完整，包括非必填项（备注除外），填报不全扣一分，扣完为止。如企业不涉及该项（以平台无数据为准），则该不扣分；如发现隐瞒不报，则否决项，为0分</td>
                </tr>
                <tr>
                  <td >排污许可证</td>
                </tr>
                <tr>
                  <td >放射源台账</td>
                </tr>
                <tr>
                  <td >危废固废</td>
                </tr>
                <tr>
                  <td >移动源管理</td>
                </tr>
                <tr>
                  <td >其他</td>
                </tr>
                <tr>
                  <td colspan="2">系统数据填报及时率</td>
                </tr>
                <tr>
                  <td >环保报表</td>
                  <td style="text-align:left">各类报表数据填报时间与检查时间做对比，超过5天扣一分，扣完为止</td>
                </tr>
                <tr>
                  <td >风险防控</td>
                  <td style="text-align:left">企业每年3月份前没有风险防控台账更新扣满</td>
                </tr>
                <tr>
                  <td >清洁生产审核</td>
                  <td style="text-align:left">各类报表数据填报时间与检查时间做对比，超过5天扣一分，扣完为止</td>
                </tr>
                <tr>
                  <td >环保画像</td>
                  <td style="text-align:left">各类报表数据填报时间与检查时间做对比，超过5天扣一分，扣完为止</td>
                </tr>
                <tr>
                  <td >其他</td>
                  <td style="text-align:left">各类报表数据填报时间与检查时间做对比，超过5天扣一分，扣完为止</td>
                </tr>
                <tr>
                  <td colspan="2">系统数据填报完整率</td>
                </tr>
                <tr>
                  <td >环保报表</td>
                  <td rowspan="5" style="text-align:left">所有模块数据保证应填尽填报，包括非必填项（备注除外）。如果模块数据填报不完整、不及时、不准确，则发现一条扣1分，扣完为止</td>
                </tr>
                <tr>
                  <td >风险防控</td>
                </tr>
                <tr>
                  <td >清洁生产审核</td>
                </tr>
                <tr>
                  <td >环保画像</td>
                </tr>
                <tr>
                  <td >其他</td>
                </tr>
                <tr>
                  <td colspan="2">集团调整</td>
                </tr>
                <tr>
                  <td >管理员工作</td>
                  <td rowspan="4" style="text-align:left">集团可根据实际情况对企业平台使用情况进行分数调整。</td>
                </tr>
                <tr>
                  <td >问题解决</td>
                </tr>
                <tr>
                  <td >登录频次</td>
                </tr>
                <tr>
                  <td >其他</td>
                </tr>
              </table>
            </TabPane>
          </Tabs>
        </div>
      </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components: { cascaderDom },
        data() {
            return {
                ...this.createCommonDataField(),
                safeInfo:{},
                envInfo:{},
                selectionRow:[],
                tableHeight: 10,
                safeQueryLoading:false,
                envQueryLoading:false,
                queryLoading:false,
                safeVisible:false,
                envVisible:false,
                buttonLoading:false,
                columns1:[
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'companyName',title: '公司名称',  align: 'center' },
                    { key:'twoLevelOrgName',title: '所属二级集团',  align: 'center' },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 250,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {fontSize: '14px',},
                                    on: {
                                        click: () => {
                                            this.viewSafeUseCase(params.row);
                                        }
                                    }
                                }, '安全业务详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {fontSize: '14px',},
                                    on: {
                                        click: () => {
                                            this.viewEnvUseCase(params.row);
                                        }
                                    }
                                }, '环保业务详情'),
                            ]);
                        }
                    }
                ]
            }
        },
        mounted() {
            this.dataToQuery = {
              year: new Date(),
              companyName:""
            };
            this.setTableHeight();
            this.queryUseCase();
        },
        methods: {
            ...pageCommonFunction,
            pageSizeChange1(pageSize){
                this.pagedata.pageSize = pageSize;
                this.queryUseCase();
            },
            pageChange1(pageNum){
                this.pagedata.currentPage = pageNum;
                this.queryUseCase();
            },
            getSelectRows(selections){
                this.selectionRow = selections;
            },
            exportSafeTable(){
                this.$http.get(Api.viewUseCaseSafeByCompanyId + "export/list?year="+new Date(this.dataToQuery.year).getFullYear().toString(), {responseType: 'blob',params: {} }).then(res => {
                    this.safeQueryLoading = false;
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = "平台安全工作使用情况考核得分表.xlsx" //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                }).catch(e => {
                    this.safeQueryLoading = false;
                    this.$Message.error("导出失败")
                })
            },
            exportEnvTable(){
                this.$http.get(Api.viewUseCaseEnvByCompanyId + "export/list?year="+new Date(this.dataToQuery.year).getFullYear().toString(), {responseType: 'blob',params: {}},).then(res => {
                    this.envQueryLoading = false;
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = "平台环保工作使用情况考核得分表.xlsx" //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                }).catch(e => {
                    console.log(e);
                    this.envQueryLoading = false;
                    this.$Message.error("导出失败")
                })
            },
            viewSafeUseCase(row){
                this.queryLoading = true;
                this.safeVisible = true;
                this.$http.get(Api.viewUseCaseSafeByCompanyId + row.companyId+"?year="+new Date(this.dataToQuery.year).getFullYear().toString()).then(res => {
                    this.queryLoading = false;
                    if (res.data.data != null){
                      this.safeInfo = res.data.data;
                    }
                }).catch(e => {
                    this.queryLoading = false;
                    this.$Message.error("数据获取失败")
                })
            },
            viewEnvUseCase(row){
                this.queryLoading = true;
                this.envVisible = true;
                this.$http.get(Api.viewUseCaseEnvByCompanyId + row.companyId+"?year="+new Date(this.dataToQuery.year).getFullYear().toString()).then(res => {
                    if (res.data.data != null){
                        this.envInfo = res.data.data;
                    }
                    this.queryLoading = false;
                }).catch(e => {
                    this.queryLoading = false;
                    this.$Message.error("数据获取失败")
                })
            },
            queryUseCase(){
                this.pageStatus.loading = true;
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    companyName: this.dataToQuery.companyName
                }
  				      let companyId = sessionStorage('userId').getObject('userId').companyId
                let url = Api.queryCompanysByCompanyId + companyId;
                this.$http.get(url,{ params: data}).then((res) => {
                    this.pageStatus.loading = false;
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reseter() {
              this.dataToQuery.year = new Date(),
              this.dataToQuery.companyId = "";
              this.dataToQuery.companyName = "";
              this.pagedata.currentPage = 1;
      				this.queryUseCase()
            },
            submit(formData){

            },
            handleCancel(){
                this.safeVisible = false;
                this.envVisible = false;
            }
        }
    }

</script>
<style scoped>

    table,td{
        border:1px solid #ccc;
        border-collapse:collapse;
    }

    table {
        table-layout: fixed;
        width: 100%;
    }

    table, th, td {
        border: 1px solid #999;
        padding: 5px;
        text-align: center;
        height:32px;
    }

    caption, th{
        text-align: center;
    }
</style>
</style>